<template>
	<view class="fullscreen" @click="showAnswer" v-if="rember && haveLevel">
		<view class="main">
			<view class="mainContent">
				<view class="words">
					<text>abandon</text>
				</view>
				<view class="sound">
					<view class="content">
						<text>美[ebændan]</text>
					</view>
					<view class="button">
						<uni-icons type="sound" size="25"></uni-icons>
					</view>
				</view>
			</view>
			<view class="notice">
				<text>请回忆发音及释义</text>
				<br>
				<text>点击屏幕显示答案</text>
			</view>
		</view>
	</view>
	<view v-if="!rember && haveLevel">
		<view class="maincontainer">
			<view class="mainContent">
				<view class="words">
					<text>abandon</text>
				</view>
				<view class="sound">
					<view class="content">
						<text>美[ebændan]</text>
					</view>
					<view class="button">
						<uni-icons type="sound" size="25"></uni-icons>
					</view>
				</view>
			</view>
			<view class="paraphrase">
				vt.<br>
				放弃(信念);<br>
				(不顾责任、义务等)离弃，遗弃，抛弃;<br>
				n.<br>
				放任;放纵;
			</view>
		</view>
		<view class="example">
			<view class="title">
				<text>例句</text>
			</view>
			<view class="content">
				<view class="item" v-for="i in 3">
					<view class="liju">
						Their decision to<text class="red"> abandon</text> the trip was made because of financial
						constraints<br>
						他们决定<text class="red">放弃</text>这次出游是因为财力有限。
					</view>
					<view class="icon">
						<uni-icons type="sound" size="30"></uni-icons>
					</view>
				</view>


			</view>
		</view>
		<view class="otherWords">
			<view class="title">
				<text>变形</text>
			</view>
			<view class="content">
				<view class="word" v-for="i in 4">
					<text>第三人称单数abandons</text>
				</view>
			</view>
		</view>
		<view class="buttoms">
			<view class="button success" @click="remberThis">
				<view class="buttonMain">
					熟悉
				</view>
				<view class="detail">
					今天不用背了
				</view>
			</view>
			<view class="button warn" @click="vague">
				<view class="buttonMain">
					模糊
				</view>
				<view class="detail">
					一会儿再背一遍
				</view>
			</view>
			<view class="button err" @click="forget">
				<view class="buttonMain">
					不认识
				</view>
				<view class="detail">
					记不住根本记不住
				</view>
			</view>
		</view>
	</view>
	<view class="" v-if="!haveLevel">
		你还没有段位哦，选一个段位开始吧，
		<view class="button-sp-area">
			<button type="primary" v-for="item in wordBookList">{{item.name}}</button>
		</view>
	</view>
</template>

<script setup>
	var rember = ref(true)
	var haveLevel = ref(false)

	var wordBookList = ref([{
		name: "小学",
		value: "sss"
	},{
		name: "初中",
		value: "sss"
	},{
		name: "高中",
		value: "sss"
	},{
		name: "四级",
		value: "sss"
	},{
		name: "六级",
		value: "sss"
	}])

	var wordsList = ref([])

	onLoad(() => {
		
		// 获取用户词书和计划单词，如果用户无词书，则让用户选择词书并计划单词
		
		
		// 获取用户计划单词，如果用户没有计划单词，则自动按等级分配（排除已熟知单词）
		
		
		//用户完全背完后，用户可返回首页、自选单词继续背、或者系统分配单词继续背。
		

		// 熟知的单词当日不再出现,模糊的单词继续出现直到熟悉,不认识的单词持续出现直到熟知
		

		// 标记过模糊或不认识的单词,分别在4天和2天后复习



	})
	
	//获取计划单词或段位
	function getUserWordAndBook(){
		
	}

	// 显示答案
	function showAnswer() {
		rember.value = !rember.value
	}

	// 记住了
	function remberThis() {
		rember.value = !rember.value
	}
	// 模糊
	function vague() {
		rember.value = !rember.value
	}
	// 不记得
	function forget() {
		rember.value = !rember.value
	}
</script>

<style lang="scss">
	.fullscreen {
		height: 100vh;
	}

	.main {
		background-color: #FCF7C4;
	}

	.mainContent {
		height: 300rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;

		.words {
			font-size: 50rpx;
			text-align: center;
		}

		.sound {
			display: flex;
			justify-content: center;
		}

	}

	.notice {
		height: 100rpx;
		text-align: center;
		color: var(--datail-text-color);
	}

	.maincontainer {
		background-color: #FCF7C4;
	}


	.mainContent {
		height: 250rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;

		.words {
			font-size: 50rpx;
			text-align: center;
		}

		.sound {
			display: flex;
			justify-content: center;
		}

	}

	.paraphrase {
		text-align: left;
		padding: 20rpx 40rpx;
		color: var(--datail-text-color);
		border-top: 1px solid #c4c4c4;
	}

	.example {
		padding: 20rpx 40rpx;
		border-bottom: 5rpx solid #c4c4c4;

		.title {
			text {
				border-bottom: 4rpx solid #efd05a;
			}
		}

		.content {
			margin: 10rpx 0;

			.item {
				display: flex;
				justify-content: space-between;
				margin: 30rpx 0;

				.icon {
					margin: auto 0;
				}

				.red {
					color: red;
				}
			}
		}

	}

	.otherWords {
		padding: 20rpx 40rpx;
		border-bottom: 5rpx solid #c4c4c4;

		.title {
			text {
				border-bottom: 4rpx solid #efd05a;
			}
		}

		.content {
			margin: 20rpx 30rpx;
			display: flex;
			flex-wrap: wrap;

			.word {
				height: 100rpx;
				width: 200rpx;
				margin: 5rpx 30rpx;
			}

		}
	}

	.buttoms {
		display: flex;
		padding: 20rpx 40rpx;
		justify-content: space-between;

		.button {
			color: #fff;
			border-radius: 10rpx;
			width: 200rpx;
			height: 60rpx;

			.buttonMain {
				margin: auto;
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
			}

			.detail {
				margin: auto;
				font-size: 10rpx;
				text-align: center;
			}

		}

		.success {
			background-color: #8DD7C5;
		}

		.warn {
			background-color: #efd05a;
		}

		.err {
			background-color: #EFB89F;
		}

	}
</style>